<template>
  <div>
    新闻列表
    <el-divider></el-divider>
    <el-form @submit.native.prevent>
      <el-form-item class="item-button">
        <!-- 全部选择 -->
        <el-button type="primary" size="small" icon="el-icon-document-copy"
          >全部选中</el-button
        >
        <!-- 删除选中 -->
        <el-button type="danger" size="small" icon="el-icon-delete"
          >删除选中</el-button
        >
        <!-- 重置搜索 -->
        <el-button
          size="small"
          icon="el-icon-refresh"
          style="float: right; margin-top: 5px"
          >重置</el-button
        >
        <!-- 搜索按钮 -->
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          style="float: right; margin-top: 5px"
          @click="search"
          >搜索</el-button
        >
        <!-- 搜索框 -->
        <el-input
          size="small"
          style="width: 280px; float: right"
          v-model="keyword"
          @keyup.native.enter = 'search'
        >
        </el-input>
        <!-- 新增数据 -->
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          style="margin-left: 10px"
          @click="$router.push(`/home/news-add`)"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <el-table style="width: 100%" :data="news.data" border>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column prop="news_id" label="序号" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="news_title"
        label="标题"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="name" label="图片" width="300" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.news_img" width="160px" height="100" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        prop="news_content"
        label="内容"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="news_time"
        label="发布时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column prop="address" width="300" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="$router.push(`/home/news-update/${scope.row.news_id}`)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-menu"
            size="small"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="del(scope.row.news_id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="->, total, prev, pager, next, jumper"
      :total="news.total"
      :page-size="news.pagesize"
      :current-page="news.page"
      @current-change="changeCurrentPage($event)"
    >
    </el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      news: {},
      keyword: "",
    };
  },
  methods: {
    listnews(num) {
      httpApi.newsApi.list({ page: num, pagesize: 3 }).then((res) => {
        console.log(res);
        this.news = res.data;
        console.log(this.news);
      });
    },
    del(news_id) {
      console.log("即将删除的科普:", news_id);
      this.$confirm("将永久删除这条科普, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 发送http请求, 执行删除业务
        httpApi.newsApi.del({ news_id }).then((res) => {
          console.log("删除业务结果", res);
          // 更新列表  带着关键字 向当前页再发一次请求即可
          if (this.news.data.length == 1 && this.news.page > 1) {
            this.changeCurrentPage(this.news.page - 1);
          } else {
            this.changeCurrentPage(this.news.page);
          }
        });
      });
    },
    listByName(page){
      httpApi.newsApi.listByName({ keyword: this.keyword, page, pagesize: 3 }).then((res) => {
          console.log(res);
          this.news = res.data;
    })},
    search() {
      if (this.keyword == "") return;
      httpApi.newsApi
        .listByName({ keyword: this.keyword, page: 1, pagesize: 3 })
        .then((res) => {
          console.log(res);
          this.news = res.data;
        });
    },
    changeCurrentPage(page) {
      console.log(page);
      if (this.keyword.trim()) {
        // 有关键字  模糊查询分页
        this.listByName(page)
      } else {
        // 没有关键字 加载显示相应页码的数据
        this.listnews(page);
      }
    },
  },
  mounted() {
    this.listnews(1);
  },
};
</script>

<style lang="scss" scoped>
.cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
img{
  object-fit: cover;
}
</style>